<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <div id="main" style="width:800px;height:600px;"></div>
  <script src="./js/echarts.min.js"></script>
  <script>
   const foodArr =[
    {name:"苹果",value:1330},
    {name:"香蕉",value:12223},
    {name:"火龙果",value:4310},
    {name:"荔枝",value:1350},
    {name:"榴莲",value:102343},
    {name:"山竹",value:1560},
    {name:"芭乐",value:1340}
   ]
    

   const myChart = echarts.init(document.querySelector("#main"))
   //绘图参数 配置项
   const option={
    title:{
     text:"水果的售价"
    },
    legend:{
     right:'5%',
     data:['价格']
    },
    grid:{
     left:'20%',
    },
    xAxis:{
     data:foodArr.map(v => v.name)
     //data:[xxxx,xxxx,xxxx,zzzz]
    },
    yAxis:{
     //Y轴分割线
     splitLine:{
      lineStyle:{
       type:"dotted"
      }
     }
    },
    //提示框组件
    tooltip:{
     //触发方式 默认图形
     trigger:'axis'
    },
    series:[
     {
      name:'价格',
      type:'bar',
      data:foodArr.map(v => v.value)
     }
    ],
    
    //#_ _ _ _ _ _
    //  R R G G B B
    color:['#86cce9']
   }
   myChart.setOption(option)
  </script>
 </body>
</html>